<template>
    <div class="mainBody home-box">
        <Header></Header>
        <div class="home-main">
            <Lists class="lists">
            </Lists>

            <Head class="head">
            </Head>

            <Body class="body"></Body>
            <Rate class="rate"></Rate>

            <transition name="hiddenLyric">
                <Lyric class="lyric" v-show="lyric2.hiddenLyric"></Lyric>
            </transition>
        </div>
        <!-- <Footer></Footer> -->

        <transition name="hiddenIt">
            <PlayingLists class="PlayingLists" :hidden="hidden" @getHidden="getHidden" v-show="!hidden">
            </PlayingLists>
        </transition>
    </div>
</template>

<script lang="ts" setup>
import Header from '../components/Common/Header.vue';
import Footer from '../components/Common/Footer.vue';
import Body from './body/Body.vue';
import Head from './head/Head.vue';
import Lists from './lists/Lists.vue';
import Rate from './rate/Rate.vue';
import Lyric from './lyric/Lyric.vue'
import PlayingLists from './playingLists/PlayingLists.vue';
import { ref, provide, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { getMusic } from '@/stores/getMusic'
import { getMusicListsDetail } from '@/utils/api';
import { lyric2 } from '@/utils/playMusic';

const hidden = ref<Boolean>(true)

const user = useUserStore()
const user2 = getMusic()
onMounted(async () => {
    user.getUserDetail()
    user2.getUserSubbcount()
    user2.getUserMusicLists()
    // let data = await getMusicListsDetail(user.profile.userId)
    // console.log(data)
})

/* 接收儿子传过来的参数 */
const getHidden = (hide: Boolean) => {
    hidden.value = hide
}
/* 祖传孙 */
provide('hidden2', hidden)
/* 接收孙子传过来的参数 */
provide('handle', {
    getMsg: () => hidden.value,
    setMsg: (value: Boolean) => {
        hidden.value = value
    }
})

</script>

<style lang="scss" scoped>
.home-box {
    // backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-width: 1200px;

    .home-main {
        min-width: 1200px;
        min-height: 760px;
        max-height: 760px;
        height: 100%;
        background-color: var(--home);
        margin-top: 20px;
        margin-bottom: 20px;
        display: grid;
        grid-template-areas:
            'lists head'
            'lists body'
            'lists rate'
        ;
        grid-template-columns: minmax(150px, 220px) 1000px;
        grid-template-rows: 60px 1fr 80px;
        position: relative;
        overflow: hidden;

        .lists {
            grid-area: lists;
        }

        .head {
            grid-area: head;
        }

        .body {
            grid-area: body;
        }

        .rate {
            grid-area: rate;
        }

        .lyric {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 5;
            background-color: rgb(0, 255, 255);
            overflow: hidden;
        }
    }

    .PlayingLists {
        position: absolute;
        height: 100%;
        right: 0;
    }
}

.hiddenIt-enter-active {
    animation: slideFade-dialog-fade-in 0.5s ease;
}

.hiddenIt-leave-active {
    animation: slideFade-dialog-fade-out 0.5s ease forwards;
}

@keyframes slideFade-dialog-fade-in {
    0% {
        transform: translate3d(100%, 0, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideFade-dialog-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 1;
    }
}

.hiddenLyric-enter-active {
    animation: hiddenLyric-dialog-fade-in 0.3s ease;
}

.hiddenLyric-leave-active {
    animation: hiddenLyric-dialog-fade-out 0.3s ease forwards;
}

@keyframes hiddenLyric-dialog-fade-in {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes hiddenLyric-dialog-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 100%, 0);
        opacity: 1;
    }
}
</style>